<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            user-select: none;
        }

        .love-bd {
            width: 100%;
            height: 100vh;
            position: fixed;
            left: 0;
            top: 0;
            z-index: -99;
            display: flex;
            justify-content: center;
        }

        .love-bd div {
            width: 12.5%;
            height: 100%;
        }

        .love-bd div:nth-child(1) {
            background: #4797b1;
        }

        .love-bd div:nth-child(2) {
            background: #c5ecbe;
        }

        .love-bd div:nth-child(3) {
            background: #f7f3ce;
        }

        .love-bd div:nth-child(4) {
            background: #ffdede;
        }

        .love-bd div:nth-child(5) {
            background: #95e1d3;
        }

        .love-bd div:nth-child(6) {
            background: #d6f7ad;
        }

        .love-bd div:nth-child(7) {
            background: #fce38a;
        }

        .love-bd div:nth-child(8) {
            background: #f38181;
        }

        .love-content {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 95%;
            height: 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            z-index: 1;
        }

        .love-book {
            width: 800px;
            height: 90%;
            backdrop-filter: blur(5px);
            border-radius: 20px;
            border: solid #333 5px;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: h;
        }

        .love-book .love-bigimg {
            border-radius: 16px;
            background: inherit;
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .love-book .love-bigimg .love-bigimg-content {
            z-index: 99;
            border-radius: 16px;
            position: absolute;
            background: #f1f1f1;
            top: -100%;
            width: 100%;
            height: 100%;
            transition: all 1s;
            display: flex;
            justify-content: center;
        }

        .love-bigimg-content .close {
            position: absolute;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 3px solid #333;
            text-align: center;
            cursor: pointer;
            top: 10px;
            right: 60px;
            font-weight: 700;
        }

        .love-bigimg-content div.imgbox {
            width: 90%;
            height: 100%;
        }

        .love-bigimg-content div img {
            width: 100%;
            height: 100%;
        }

        .love-book .love-btn {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            border: 3px solid #333;
            border-top: 0;
            padding: 5px 10px;
            text-align: center;
            border-radius: 0 0 8px 8px;
            cursor: pointer;
            color: #f1f1f1;
            background: #333;
            font-size: 12px;
        }

        .love-book::after {
            border-radius: 20px;
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            background: inherit;
            background: #f1f1f1;
            opacity: .3;
        }

        .love-book div.behave {
            position: absolute;
            width: 100px;
            height: 100px;
            z-index: 100;
            transform: translateY(25%);
        }

        .love-book div.behave:nth-child(1) {
            background: url(./image/mirror.gif) no-repeat;
            background-size: 100%;
            left: -50px;
            top: 0%;
        }

        .love-book div.behave:nth-child(2) {
            background: url(./image/tietie1.gif) no-repeat;
            background-size: 100%;
            left: -50px;
            top: 25%;
        }

        .love-book div.behave:nth-child(3) {
            background: url(./image/sajiao1.gif) no-repeat;
            background-size: 100%;
            left: -50px;
            top: 50%;
        }

        .love-book div.behave:nth-child(4) {
            background: url(./image/zhuanquan.gif) no-repeat;
            background-size: 100%;
            left: -50px;
            top: 75%;
        }

        .love-book div.behave:nth-child(5) {
            background: url(./image/huazhuang.gif) no-repeat;
            background-size: 100%;
            right: -50px;
            top: 0%;
        }

        .love-book div.behave:nth-child(6) {
            background: url(./image/tietie2.gif) no-repeat;
            background-size: 100%;
            right: -50px;
            top: 25%;
        }

        .love-book div.behave:nth-child(7) {
            background: url(./image/touxiao.gif) no-repeat;
            background-size: 100%;
            right: -50px;
            top: 50%;
        }

        .love-book div.behave:nth-child(8) {
            background: url(./image/wanan.gif) no-repeat;
            background-size: 100%;
            right: -50px;
            top: 75%;
        }

        .love-msg {
            width: 650px;
            height: 90%;
            overflow: auto;
            font-size: 40px;
            position: relative;
        }

        .love-msg::-webkit-scrollbar,
        .love-time::-webkit-scrollbar {
            width: 0 !important
        }

        .love-time {
            width: 380px;
            height: 90%;
            overflow: auto;
            display: flex;
            justify-content: center;
        }

        .love-time .love-line {
            position: relative;
            width: 4px;
            background: #333;
            /* height: 1333px; */
        }

        .love-time .love-line .last {
            width: 80px;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: -302px;
            text-align: center;
            font-weight: 700;
        }

        .love-time .love-line .exp {
            text-align: center;
            width: 110px;
            padding: 5px;
            position: absolute;
            top: calc(var(--i) * 60px + (var(--i) - 1) * 120px);
            left: 50%;
            transform: translateX(-50%);
            border: #333 3px solid;
            background: #f1f1f1;
            border-radius: 8px;
        }

        .love-time .love-line .exp .happen {
            cursor: pointer;
            position: absolute;
            left: calc(var(--a)*1px + -135px);
            /* right: -135px; */
            top: 50%;
            transform: translateY(-50%);
            width: 120px;
            height: 150px;
            padding: 5px;
            border: #333 3px solid;
            background: #f1f1f1;
            border-radius: 8px;
        }

        .happen img {
            width: 100%;
            height: 100%;
        }

        .back {
            position: absolute;
            top: 20px;
            left: 0;
            width: 60px;
            height: 30px;
            text-align: center;
            border: 3px solid;
            border-left: 0;
            display: flex;
            background: #f1f1f1;
            justify-content: center;
            align-items: center;
        }

        .to {
            position: absolute;
            top: 20px;
            right: 0;
            width: 80px;
            height: 30px;
            text-align: center;
            border: 3px solid;
            border-right: 0;
            display: flex;
            background: #f1f1f1;
            justify-content: center;
            align-items: center;
        }

        .back a,
        .to a {
            text-decoration: none;
            color: #333;
        }
    </style>
</head>

<body>
    <div class="love-bd">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="love-content">
        <div class="love-time">
            <div class="love-line" id="love-line">
                <div class="last">未完待续</div>
                <div class="exp" style="--i:1;">
                    2022-02-14
                    <div class="happen" style="--a:0;"><img src="./image/214表白.png" alt=""></div>
                </div>
                <div class="exp" style="--i:2;">2022-02-17
                    <div class="happen" style="--a:255;"><img src="./image/217第一次约会.png" alt=""></div>
                </div>
                <div class="exp" style="--i:3">2022-02-24
                    <div class="happen" style="--a:0;"><img src="./image/224第一次牵手.jpg" alt=""></div>
                </div>
                <div class="exp" style="--i:4">2022-03-03
                    <div class="happen" style="--a:255;"><img src="./image/303第一次视频.png" alt=""></div>
                </div>
                <div class="exp" style="--i:5">2022-03-07
                    <div class="happen" style="--a:0;"><img src="./image/307女生节.png" alt=""></div>
                </div>
                <div class="exp" style="--i:6">2022-03-09
                    <div class="happen" style="--a:255;"><img src="./image/309第一次语音通话.png" alt=""></div>
                </div>
                <div class="exp" style="--i:7">2022-03-11
                    <div class="happen" style="--a:0;"><img src="./image/311女朋友的好和坏.png" alt=""></div>
                </div>
                <div class="exp" style="--i:8">2022-03-17
                    <div class="happen" style="--a:255;"><img src="./image/317给女朋友庆生.jpg" alt=""></div>
                </div>
                <div class="exp" style="--i:9">2022-04-05
                    <div class="happen" style="--a:0;"><img src="./image/405去找女朋友.jpg" alt=""></div>
                </div>
                <div class="exp" style="--i:10">2022-04-24
                    <div class="happen" style="--a:255;"><img src="./image/424帮女朋友搬家.png" alt=""></div>
                </div>
                <div class="exp" style="--i:11">2022-05-30
                    <div class="happen" style="--a:0;"><img src="./image/530不能干坏事.png" alt=""></div>
                </div>
                <div class="exp" style="--i:12">2022-06-05
                    <div class="happen" style="--a:255;"><img src="./image/605官宣.jpg" alt=""></div>
                </div>
                <div class="exp" style="--i:13">2022-06-20
                    <div class="happen" style="--a:0;"><img src="./image/620给女朋友做饭.png" alt=""></div>
                </div>
                <div class="exp" style="--i:14">2022-06-23
                    <div class="happen" style="--a:255;"><img src="./image/623吵架最严重的一次.png" alt=""></div>
                </div>
                <div class="exp" style="--i:15">2022-06-26
                    <div class="happen" style="--a:0;"><img src="./image/626换情头.png" alt=""></div>
                </div>
                <div class="exp" style="--i:16">2022-07-22
                    <div class="happen" style="--a:255;"><img src="./image/722换情头.png" alt=""></div>
                </div>
            </div>
        </div>
        <div class="love-book">
            <div class="behave"></div>
            <div class="behave"></div>
            <div class="behave"></div>
            <div class="behave"></div>
            <div class="behave"></div>
            <div class="behave"></div>
            <div class="behave"></div>
            <div class="behave"></div>
            <div class="love-bigimg">
                <div class="love-bigimg-content">
                    <div class="close">X</div>
                    <div class="imgbox"><img id="showimg" src="./image/lzj.png" alt=""></div>
                </div>
            </div>
            <!-- <div id="love-btn" class="love-btn">点击展开噢~</div> -->
            <div class="love-msg" id="love-msg">
                20220217，你答应和我在一起了诶。我当时超级开心的，我有女朋友啦！<br>
                从那一天开始，我可以以男朋友的身份去关心你，呵护你，照顾你，更重要的是分享快乐，分担烦恼，分摊心事。<br>
                我女朋友，阿娟是个很好的人，聪明大方随性可爱美丽优秀温柔(才怪)贤淑。不得不感叹自己真的超级幸运啊！有个这么好的女朋友！上辈子肯定是拯救了银河系嘻嘻~<br>
                我们在一起多久来着？五个月14天了，167天啦~不由感叹时间过得真快。五个多月的相互磨合，让我想想？我们经历了啥来着？捡印象深刻的说吧。<br>
                第一次约会的时候，小雨，我们是去散步来着，一路上我在想怎么牵你的手hhh，可惜啊太怂了不敢。最后送到你家楼下的时候，有点不甘心，我说能不能抱抱，然后就尬住了，瞬间扣出三室一厅。<br>
                然后就是第二次约会的时候，我们是去了博物馆来着，回来吃了晚餐然后散步聊天，那时候是不是第一次暴露了我的路痴属性，问题不大，重要的事，这次牵手了嘿嘿。<br>
                emmm然后你回学校了，该死的异地来了呀。<br>
                没关系，开会！进来谈恋爱？什么？“接完这桶水再来谈？”“不行不行马上进来！”“开视频呐”第一次开会你并没有开视频，有点小失落嘿嘿。但是没事后面开了，我女朋友真可爱啊隔着屏幕都这么好看。<br>
                我们一直开会看完了1988，嘿嘿老好看了，成功完成心愿:“和女朋友追完一部剧”。<br>
                还有什么呢，想想看。哦对！第一次送礼物！女生节ho，一直在想送啥……好吧~_~大夏天送暖手宝，当时就是觉得可能姨妈来了会用到呐。不过我画的卡片你应该会喜欢吧，小红书是个好东西，我搁那上面学的。<br>
                还有呢？哦生日礼物！没看测评送护肤品hhh，好吧直男一次别介意哩，软呐~说到生日，那一晚隔着屏幕给你过生日，真的超级高兴啊<br>
                还有还有，第一次跨城市找你，清明那两天假期。第一天晚上我喊你出房间“线下就要有线下的样子”，然后我抱了你，啊激动的马上回屋……不过睡得还是蛮香的~<br>
                接下来印象深刻的还有:你说:“白羊座不能在一段感情中感到不舒服”，我一直记得呢~<br>
                然后就是女朋友苦逼的毕业论文和答辩和找工作时期了。那个时候你肯定很累吧，搞这搞那。可惜啊男朋友太菜了不能帮你做毕设系统，啊好恨哇技术不过关。不过我女朋友这么优秀，答辩如愿以偿，过了。找工作，啊也挺难的，不过不能质疑自己喔，只是错过一些好的机会而已。找到适合自己的路，早晚的事。迈急。男朋友能帮就帮，不能帮到的就给你当出气筒，给你端茶递水。<br>
                当然有时候也有不愉快的时候，男朋友有时也慢幼稚的，时不时吃醋，有时候还喜欢阴阳怪气的数落你hhh，第一次好像有点不愉快是啥来着。我直接退出会议是吧，把你气坏了是吧，莫意思呐。我太任性啦~马上改掉！<br>
                还有，有时候我自己说出的话却要吊你胃口，然后还没意识到自己错了。我记得很清楚，那是623的时候。我深刻反省了，总而言之，在日后要成熟一点才行~<br>
                还有，女朋友真的难哄啊~不过，蛮可爱的，好吧就是有亿点点磨人而已……<br>
                还有一个重要的日子，605官宣。“端午节安康~”<br>
                还有就是:620第一次给你做的饭……啊是椰子鸡(真的吃起来还行吗哈哈哈)<br>
                啊不知道说啥啦~来日方长~(文案准备也仓促hhh)，未完待续哩~<br>
                <br>
                <br>
                这些日子，在更加了解你的同时，我自己也一直一直在想要怎么做才算合格的男友，努力吧嘻嘻<br>
                最后，七夕快乐哩~<br>
            </div>
        </div>

    </div>

    <div class="back"><a href="./index.html">返回</a></div>
    <div class="to"><a href="./wish.html">情绪墙></a></div>
    <audio id="bgmusic" autoplay="autoplay">
        <source src="./music/五月天&陈绮贞-私奔到月球.mp3" type="audio/mpeg" />
    </audio>

    <script src="./music.js"></script>
    <script>
        function init() {
            loveLine = document.getElementById('love-line')
            happen = document.getElementsByClassName('happen')
            exp = document.getElementsByClassName('exp')
            loveBtn = document.getElementById('love-btn')
            loveImg = document.getElementsByClassName('love-bigimg-content')[0]
            showimg = document.getElementById('showimg')
            close = document.getElementsByClassName('close')[0]

        }
        init();

        loveLine.style.height = (happen[0].clientHeight + exp[0].clientHeight) * happen.length + "px"
        for (let i = 0; i < happen.length; i++) {
            happen[i].onclick = function () {
                if (!loveImg.style.top || loveImg.style.top == "-100%") {
                    loveImg.style.top = "0"
                }
                showimg.attributes.src.value = this.children[0].attributes.src.value
            }
        }
        close.onclick = function () {
            loveImg.style.top = "-100%"
        }
    </script>
</body>

</html>